/**
 * Emote Entry Model 
 */
function EmoteEntryModel(displayName, thumbNailUrl, emoteImageUrl, emoteContent){
	this.displayName=displayName;
	this.thumbNailUrl=thumbNailUrl;
	this.emoteImageUrl=emoteImageUrl;
	this.emoteContent=emoteContent;
};

EmoteEntryModel.prototype.getDisplayName=function(){
	return this.displayName;
};
EmoteEntryModel.prototype.getThumbNailUrl=function(){
	return this.thumbNailUrl;
};
EmoteEntryModel.prototype.getEmoteImageUrl=function(){
	return this.emoteImageUrl;
};
EmoteEntryModel.prototype.getEmoteContent=function(){
	return this.emoteContent;
};



/**
 * Emote Entry View - this view renders the emoteEntryModel
 * 
 */
function EmoteEntryView(model){
	this.model=model;
};

EmoteEntryView.prototype.getModel=function(){
	return this.model;
};

EmoteEntryView.prototype.appendTo=function(id){
	$(id).append("<div class='emote-entry-view'> <table><tr><td><img src='"+this.model.getThumbNailUrl()+"'/></td><td rowspan=3><div class='content'>"+this.model.getEmoteContent()+"</div></td></tr><tr><td><div>"+this.model.getDisplayName()+"</div></td></tr> <tr><td><img src='"+this.model.getEmoteImageUrl()+"'/></td></tr> </table> </div>");
};


function EmoteEntryEditor(model,emotes){
	this.model=model;
	this.view=new EmoteEntryView(model);
	this.emotes=emotes;
	this.emoteBar=new EmoteBarView(this.emotes,this.model.getEmoteImageUrl(),5);

}
EmoteEntryEditor.prototype.getModel=function(){
	return this.model;
};

EmoteEntryEditor.prototype.registerSaveHandler=function(saveHandle){
	this.saveHandle=saveHandle;
}
EmoteEntryEditor.prototype.appendTo=function(id){
	this.initHTMLEditor();
	$(id).append("<table id='view'><tr><td></td></tr><tr><td></td></tr></table><table id='editor' style='display:none' ><tr><td></td><td></td><td width='100px'>&nbsp;</td><td width='100px'>&nbsp;</td></tr><tr><td colspan=4></td></tr></table>");
	$("#view>tbody>tr:eq(0)>td:eq(0)").append("<div class='button' id='edit-button'>Edit</div>");
	this.view.appendTo("#view>tbody>tr:eq(1)>td:eq(0)");
	
	$("#editor>tbody>tr:eq(0)>td:eq(0)").append("<div class='button' id='save-button'>Save</div>");
	$("#editor>tbody>tr:eq(0)>td:eq(1)").append("<div class='button' id='cancel-button'>Cancel</div>");
	$("#editor>tbody>tr:eq(1)>td:eq(0)").append("<table border=4><tr><td><div id='emote-bar'></div></td></tr><tr><td><textarea id='edit-content' rows=20 cols=60></textarea></td></tr></table>");
	
	
	
	this.emoteBar.appendTo("#emote-bar");
    var me=this;
    
	$("#edit-button").bind("click",function(){$("#editor").fadeIn("slow");$("#view").fadeOut("slow");});
	$("#save-button").bind("click",function(){me.saveHandle(me.getEmoteIcon(),me.getContent());$("#view").fadeIn("slow");$("#editor").fadeOut("slow");});
	$("#cancel-button").bind("click",function(){$("#view").fadeIn("slow");$("#editor").fadeOut("slow");});
	$("#edit-content").html(this.model.getEmoteContent());
	
    
};
EmoteEntryEditor.prototype.getContent=function(){
	return tinyMCE.get("edit-content").getContent();
}
EmoteEntryEditor.prototype.getEmoteIcon=function(){
	return this.emoteBar.getSelectedImage();
}
EmoteEntryEditor.prototype.initHTMLEditor=function(){

	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
		
		// Theme options
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,
		
		// Example word content CSS (should be your site CSS) this one removes paragraph margins
		content_css : "css/word.css",
		
		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",
		
		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
			}
	});
}

function EmoteBarView(emotes,selectedEmote,visibleEmote){
	this.startIndex=0;
	this.emotes=emotes;
	this.size=emotes.length;
    this.visibleEmotes=visibleEmote;
    this.selectedEmote=selectedEmote;
	
};

EmoteBarView.prototype.getSelectedImage=function(){
	return this.selectedEmote;
};
EmoteBarView.prototype.appendTo=function(id){
	
	$(id).html("<table id='emote-selection-bar'><tr></tr></table>");
	
	$("#emote-selection-bar > tbody > tr").append("<td><div id='first' class='nav-buttons'>&lt;&lt;</div></td>");
    $("#emote-selection-bar > tbody > tr").append("<td><div id='prev' class='nav-buttons'>&lt;</div></td>");
    
	for(var index=0;index<this.size;index++){
		var image=this.emotes[index];
		var className=index<this.visibleEmotes?"visible-emote":"invisible-emote";
		$("#emote-selection-bar > tbody > tr").append("<td><img id='emote-"+index+"' src='"+image+"' class='"+className+" emote'></img></td>");
	}	
	
	$("#emote-selection-bar > tbody > tr").append("<td><div id='next' class='nav-buttons'>&gt;</div></td>");
    $("#emote-selection-bar > tbody > tr").append("<td><div id='last'class='nav-buttons'>&gt;&gt;</div></td>");
    var me=this;
   
	$("#first").bind("click",function(){me.selectEmote("first");});
	$("#prev").bind("click",function(){me.selectEmote("prev");});
	$("#next").bind("click",function(){me.selectEmote("next");});
	$("#last").bind("click",function(){me.selectEmote("last");});
	var me=this;
	$(".emote").each(function(){ $(this).bind("click",function(){$(".selected-emote").removeClass("selected-emote");me.selectedEmote=$(this).attr("src");$(this).addClass("selected-emote");}) });

	$("img[src='"+this.selectedEmote+"']").addClass("selected-emote");
   

     
	    
};




EmoteBarView.prototype.selectEmote=function(position){

	var index=0;
	
	if(position=="first"){
		index=0;
	}
	else if(position=="prev"){
		index=this.startIndex<=0?0:this.startIndex-1;
	}
	else if(position=="next"){
		index=(this.startIndex+this.visibleEmotes)>=this.size?this.size-this.visibleEmotes:this.startIndex+1;
	}
	else if(position=="last"){
		index=this.size-this.visibleEmotes;
	}
	this.startIndex=index;
	
	
	$(".visible-emote").each(function(){ $(this).removeClass("visible-emote").addClass("invisible-emote"); });
		for(var index=this.startIndex;index<this.startIndex+this.visibleEmotes;index++){
		$("#emote-"+index).each(function(){ $(this).removeClass("invisible-emote").addClass("visible-emote"); });
	}

};



